@import "@/styles/variables.scss";
$background-black: rgba(34, 49, 90, 0.8);
// $background-black: #22315a;
$background-black2: rgba(34, 49, 90, 1) !important;
$background-black1: rgba(0, 0, 0, 0.5);
$background-blue: #0090d9 !important;
$background-red: #c75757 !important;
$background-green: #18a689 !important;
$background-drank: #2b2e33 !important;
$other-bg: #022d43;
$active: rgb(17, 91, 156);
$active-tree: #66b1ff87;
$active-light: mix($--color-white, $--color-primary, 30%);
$transparent: rgba(#fff, 0);
$text-active: #facd2b;
$background-f1: #f1f1f1;
$background-suidp: #071c39;
.black-bg {
  background-color: $background-black;
}
.suidp-bg {
  background-color: $background-suidp;
}
.black-bg1 {
  background-color: $background-black1;
}
.black-bg2 {
  background-color: rgb(250, 251, 255);
}
.bg-chart {
  background: #061740;
}
.blue-bg {
  background-color: $background-blue;
}
.red-bg {
  background-color: $background-red;
}
.green-bg {
  background-color: $background-green;
}
.drank-bg {
  background-color: $background-drank;
}
.on-bg {
  //   background-color: $other-bg;
}

.number-color {
  color: $text-active;
}
.white-bg {
  background-color: #fff;
}
.primary-bg {
  background-color: $--color-primary !important;
}
.primary1-bg {
  background-color: $--color-primary1 !important;
}
.active-bg {
  background-color: $active;
}
.primary-bg-light {
  background-color: $active-light;
}
.primary-bg-light-hover {
  transition: background-color 0.25s;
  &:hover {
    @extend .primary-bg-light;
  }
}
.primary-bg-dark {
  background-color: mix($--color-black, $--color-primary, 70%);
}
.primary-bg-dark-hover {
  &:hover {
    @extend .primary-bg-dark;
  }
}
.success-bg {
  background-color: $--color-success;
}
.warning-bg {
  background-color: $--color-warning;
}
.warning1-bg {
  background-color: $--color-warning1;
}
.danger-bg {
  background-color: $--color-danger;
}
.info-bg {
  background-color: $--color-info;
}
.f1-bg {
  background-color: $background-f1;
}
.menuHover-bg {
  background-color: $menuHover;
}
.hover-active,
.hover-active-alpha {
  transition: all 0.25s;
}
.hover-active:hover,
.hover-active.active {
  background-color: $active;
}
.hover-active-alpha:hover,
.hover-active-alpha.active {
  background-color: rgba($active, 0.8);
}

.hover-active-f1:hover,
.hover-active-f1.active {
  background-color: rgba($background-f1, 0.8);
}

.success-alpha {
  background-color: rgba($--color-success, 0.2);
}
.warning-alpha {
  background-color: rgba($--color-warning, 0.2);
}
.danger-alpha {
  background-color: rgba($--color-danger, 0.2);
}
